{include file="common/header-member" /}
<main class="member-index">
    <section>
        <div class="layui-main">
          {include file="common/member-nav" /}
        <h4 class="">购物车</h4>
     
        <hr>
        
        <ul class="index-order index-order-cart">
            {if count($cart_list)} 
                {volist name="cart_list" id="cart"} 
                <li data-id="{$cart.id}" class="cart-item">
                    <div class="img_100 img1">
                        <img src="{$cart.goods_logo}">
                    </div>
                    <div class="content">
                        <p>{$cart.goods_name}</p>
                        <p>{$cart.goods_spec}</p>
                    </div>
                    <hr>
                    <div class="num">
                        <div class="num-box" data-type="number">
                            <i class="layui-icon sub_cart layui-icon-subtraction"></i>
                            <input class="layui-input cart-num" value="{$cart.goods_number}">
                            <i class="layui-icon add_cart layui-icon-addition"></i>
                        </div>
                    </div>
                    <hr>
                    <div class="time">
                        <span>{$cart.add_time}</span>
                    </div>
                    <hr>
                    <div class="btn">
                        <a class="layui-btn red-btn delete-cart-item">删除物品</a>
                        <a class="layui-btn">查看详情</a>
                    </div>
                </li>    
                {/volist} 
            {/if}   
        </ul>
        
        <div class="pagenum1">
            <div id="demo-laypage-normal-1"></div>
        </div>
        </div>
    </section>
</main>
<div class="order-confrim">
    <div class="layui-main d-flex al-c jc-s">
        <span class="total_cart">共{$cart_count|default=0}件产品</span>
        <button class="layui-btn submit-order">提交订单</button>
    </div>
</div>
<script src="__ROOT__/public/static/index.js"></script>
{include file="common/footer" /}
<script>
    layui.use(function(){
        var laypage = layui.laypage;
        // 普通用法
        laypage.render({
            elem: 'demo-laypage-normal-1',
            count: 10 ,// 数据总数
            curr : {$page},
                count: {$cart_count},
                jump: function(obj, first){
                    // obj 包含了当前分页的所有参数
                    let page = obj.curr;

                    // 获取当前 URL 和查询参数
                    let url = new URL(location.href);
                    let params = new URLSearchParams(url.search);

                    // 设置或更新 page 参数
                    params.set('page', page);

                    // 将更新后的参数应用到 URL
                    url.search = params.toString();

                    // 首次不执行
                    if (!first) {
                        // 跳转到新的 URL
                        location.href = url.toString();
                    }
                }
        });

});
$(document).ready(function() {
    // 更新购物车数量
    function updateCartQuantity(cartId, newQuantity) {
        var field = {
            cart_id: cartId,
            cart_num: newQuantity
        };
        ajaxRequest('/update-cart-quantity', field, 'POST', null, function(response) {
            if (response.code === 1) {
                // 更新成功，刷新总数
                updateTotalCartCount();
            } else {
                layer.msg('更新失败，请重试！', {icon: 2, time: 2000});
            }
        });
    }

    // 更新购物车总数
    function updateTotalCartCount() {
        var totalCount = 0;

        // 遍历所有购物车项，获取每个商品的数量
        $('.cart-item').each(function() {
            var quantity = parseInt($(this).find('.cart-num').val()) || 0; // 获取每项商品的数量
            totalCount += quantity; // 累加总数
        });

        // 更新页面上显示的总数
        $('.total_cart').text('共' + totalCount + '件产品');
    }

    // 点击减少按钮
    $(document).on('click', '.sub_cart', function() {
        var $input = $(this).siblings('.cart-num');
        var cartId = $(this).closest('.cart-item').data('id');
        var currentQuantity = parseInt($input.val());
        if (currentQuantity > 1) {
            $input.val(currentQuantity - 1);
            updateCartQuantity(cartId, currentQuantity - 1);
        }
        updateTotalCartCount();
    });

    // 点击增加按钮
    $(document).on('click', '.add_cart', function() {
        var $input = $(this).siblings('.cart-num');
        var cartId = $(this).closest('.cart-item').data('id');
        var currentQuantity = parseInt($input.val());
        $input.val(currentQuantity + 1);
        updateCartQuantity(cartId, currentQuantity + 1);
        updateTotalCartCount();
    });

    // 点击删除按钮
    $(document).on('click', '.delete-cart-item', function() {
        var cartId = $(this).closest('.cart-item').data('id');
        var that = this;

        // 使用 layer.confirm 弹出确认框
        layer.confirm('确定删除该商品吗？', {
            btn: ['确认', '取消'] // 按钮
        }, function() {
            // 用户点击确认
            var field = { cart_id: cartId };
            ajaxRequest('/delete-cart-item', field, 'POST', null, function(response) {
                if (response.code === 1) {
                    // 动画效果：删除物品时显示消失效果
                    $(that).closest('.cart-item').fadeOut(500, function() {
                        $(this).remove();  // 动画结束后删除该项
                        updateTotalCartCount();  // 更新购物车总数量
                    });
                    layer.msg('删除成功', {icon: 1, time: 2000});
                } else {
                    layer.msg('删除失败，请重试！', {icon: 2, time: 2000});
                }
            });
        }, function() {
            // 用户点击取消，不做操作
            layer.msg('取消删除', {icon: 0, time: 1000});
        });
    });

    // 点击提交订单
    $(document).on('click', '.submit-order', function() {
        var cartIds = [];
        $('.cart-item').each(function() {
            cartIds.push($(this).data('id'));
        });

        if (cartIds.length > 0) {
            var field = { cart_ids: cartIds.join(',') };
            ajaxRequest('/submit-order-batch', field, 'POST', this, function(response) {
                if (response.code === 1) {
                    layer.msg('订单提交成功！', {icon: 1, time: 2000}, function() {
                        window.location.href = '/order-summary';  // 跳转到订单页面
                    });
                } else {
                    layer.msg('提交失败，请重试！', {icon: 2, time: 2000});
                }
            });
        } else {
            layer.msg('购物车为空，无法提交订单！', {icon: 2, time: 2000});
        }
    });
});



</script>


